// src/pages/Home/DataAnalysis/ReportTemplateMarket/index.js
import React, { useState } from 'react';
import {
  Card, Button, Tag, Space, Input,
  Row, Col, Divider, Typography, Empty,
  Rate, Pagination
} from 'antd';
import {
  SearchOutlined,
  BarChartOutlined,
  PieChartOutlined,
  LineChartOutlined,
  AreaChartOutlined,
  RadarChartOutlined,
  DotChartOutlined,
  HeatMapOutlined,
  FundOutlined,
  DownloadOutlined,
  EyeOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;

const ReportTemplateMarket = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 6;

  const categories = ['全部', '财务', '人事', '销售', '运营', '市场'];

  const templates = [
    {
      id: '1',
      title: '财务服务凭证统计分析',
      description: '统计分析各账套的创建凭证数量，凭证交易金额等',
      category: '财务',
      thumbnail: '/images/template1.png',
      tags: ['财务', '凭证', '统计'],
      chartType: 'bar',
      usage: 1243,
      author: '系统模板',
      rating: 4.5,
      createdAt: '2023-10-15'
    },
    {
      id: '2',
      title: '人力成本趋势分析',
      description: '针对人力成本、应发工资、实发工资、个人所得税等指标进行分析',
      category: '人事',
      thumbnail: '/images/template2.png',
      tags: ['人事', '成本', '趋势'],
      chartType: 'line',
      usage: 876,
      author: '人力资源部',
      rating: 4.2,
      createdAt: '2023-09-22'
    },
    {
      id: '3',
      title: '销售业绩多维分析',
      description: '从地区、产品、时间等多个维度分析销售业绩',
      category: '销售',
      thumbnail: '/images/template3.png',
      tags: ['销售', '业绩', '多维'],
      chartType: 'pie',
      usage: 2156,
      author: '销售部',
      rating: 4.8,
      createdAt: '2023-11-01'
    },
    {
      id: '4',
      title: '用户活跃度分析',
      description: '分析用户活跃度、留存率、使用时长等关键指标',
      category: '运营',
      thumbnail: '/images/template4.png',
      tags: ['用户', '活跃度', '留存'],
      chartType: 'area',
      usage: 932,
      author: '运营部',
      rating: 4.0,
      createdAt: '2023-08-15'
    },
    {
      id: '5',
      title: '市场营销效果分析',
      description: '分析不同营销渠道的投入产出比和转化效果',
      category: '市场',
      thumbnail: '/images/template5.png',
      tags: ['市场', 'ROI', '转化'],
      chartType: 'radar',
      usage: 645,
      author: '市场部',
      rating: 4.3,
      createdAt: '2023-10-30'
    },
    {
      id: '6',
      title: '库存周转分析',
      description: '分析库存周转率、滞销商品、补货建议等',
      category: '运营',
      thumbnail: '/images/template6.png',
      tags: ['库存', '周转', '补货'],
      chartType: 'bar',
      usage: 721,
      author: '供应链部',
      rating: 4.1,
      createdAt: '2023-09-10'
    },
    {
      id: '7',
      title: '客户满意度分析',
      description: '通过调查问卷数据分析客户满意度和改进建议',
      category: '运营',
      thumbnail: '/images/template7.png',
      tags: ['客户', '满意度', 'NPS'],
      chartType: 'scatter',
      usage: 532,
      author: '客服部',
      rating: 4.4,
      createdAt: '2023-11-05'
    },
    {
      id: '8',
      title: '网站流量热力图分析',
      description: '分析网站各页面访问热度和用户行为路径',
      category: '市场',
      thumbnail: '/images/template8.png',
      tags: ['网站', '流量', '热力图'],
      chartType: 'heatmap',
      usage: 1024,
      author: '数字营销部',
      rating: 4.6,
      createdAt: '2023-10-20'
    },
    {
      id: '9',
      title: '产品转化漏斗分析',
      description: '分析用户从访问到购买的完整转化路径',
      category: '销售',
      thumbnail: '/images/template9.png',
      tags: ['产品', '转化', '漏斗'],
      chartType: 'funnel',
      usage: 789,
      author: '产品部',
      rating: 4.7,
      createdAt: '2023-09-28'
    }
  ];

  const filteredTemplates = templates.filter(template => {
    const matchesSearch = template.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          template.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          template.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));

    const matchesCategory = selectedCategory === '全部' || template.category === selectedCategory;

    return matchesSearch && matchesCategory;
  });

  const paginatedTemplates = filteredTemplates.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  const getChartIcon = (chartType) => {
    switch (chartType) {
      case 'bar': return <BarChartOutlined />;
      case 'line': return <LineChartOutlined />;
      case 'pie': return <PieChartOutlined />;
      case 'area': return <AreaChartOutlined />;
      case 'radar': return <RadarChartOutlined />;
      case 'scatter': return <DotChartOutlined />;
      case 'heatmap': return <HeatMapOutlined />;
      case 'funnel': return <FundOutlined />;
      default: return <BarChartOutlined />;
    }
  };

  const handleUseTemplate = (templateId) => {
    console.log('使用模板:', templateId);
    // 这里可以实现使用模板的逻辑
  };

  const handlePreviewTemplate = (templateId) => {
    console.log('预览模板:', templateId);
    // 这里可以实现预览模板的逻辑
  };

  return (
    <div className="report-template-market">
      <div style={{ marginBottom: 24 }}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Input
            placeholder="搜索模板名称、描述或标签"
            prefix={<SearchOutlined />}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            style={{ width: 300 }}
          />

          <Space wrap>
            {categories.map(category => (
              <Button
                key={category}
                type={selectedCategory === category ? 'primary' : 'default'}
                onClick={() => {
                  setSelectedCategory(category);
                  setCurrentPage(1);
                }}
              >
                {category}
              </Button>
            ))}
          </Space>
        </Space>
      </div>

      <Divider />

      {paginatedTemplates.length > 0 ? (
        <>
          <Row gutter={[16, 16]}>
            {paginatedTemplates.map(template => (
              <Col span={8} key={template.id}>
                <Card
                  hoverable
                  cover={
                    <div style={{
                      height: 140,
                      backgroundColor: '#f0f2f5',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: '48px',
                      color: '#1890ff'
                    }}>
                      {getChartIcon(template.chartType)}
                    </div>
                  }
                  actions={[
                    <Button
                      type="primary"
                      icon={<DownloadOutlined />}
                      size="small"
                      onClick={() => handleUseTemplate(template.id)}
                    >
                      使用模板
                    </Button>,
                    <Button
                      icon={<EyeOutlined />}
                      size="small"
                      onClick={() => handlePreviewTemplate(template.id)}
                    >
                      预览
                    </Button>
                  ]}
                >
                  <Card.Meta
                    title={template.title}
                    description={
                      <>
                        <Text type="secondary">{template.description}</Text>
                        <div style={{ marginTop: 8 }}>
                          <Space wrap>
                            <Tag color="blue">{template.category}</Tag>
                            {template.tags.map(tag => (
                              <Tag key={tag}>{tag}</Tag>
                            ))}
                          </Space>
                        </div>
                        <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <div>
                            <Rate disabled defaultValue={template.rating} style={{ fontSize: '12px' }} />
                            <span style={{ fontSize: '12px', color: '#999', marginLeft: '4px' }}>
                              {template.rating}
                            </span>
                          </div>
                          <div style={{ fontSize: '12px', color: '#999' }}>
                            使用 {template.usage} 次
                          </div>
                        </div>
                        <div style={{ marginTop: 4, fontSize: '12px', color: '#999' }}>
                          by {template.author} | {template.createdAt}
                        </div>
                      </>
                    }
                  />
                </Card>
              </Col>
            ))}
          </Row>

          <div style={{ textAlign: 'right', marginTop: 24 }}>
            <Pagination
              current={currentPage}
              pageSize={pageSize}
              total={filteredTemplates.length}
              onChange={setCurrentPage}
              showSizeChanger={false}
            />
          </div>
        </>
      ) : (
        <Empty description="暂无匹配的模板" />
      )}
    </div>
  );
};

export default ReportTemplateMarket;
